<template>
  <div class="pay-state-page">
    <loading-more v-if="loading"></loading-more>
    <div class="pay-succ" v-if="orderState == 'ok'">
      <div class="pay-img">
        <img src="@/assets/images/i_pay_succ.png">
      </div>
      <div class="pay-txt">恭喜您，购买成功！</div>
      <div class="pay-gohome">
        <countdown v-model="time" @on-finish="finish"></countdown>秒后，跳转到首页……
      </div>
    </div>
    <div class="pay-error" v-else-if="orderState == 'cancel'">
      <div class="pay-img">
        <img src="@/assets/images/i_pay_error.png">
      </div>
      <div class="pay-txt">对不起，您已取消购买！</div>
      <div class="btn-wrap btn-next-group">
        <a href="javascript:;" class="btn-buy btn-next" @click="buyAgain()">重新购买</a>
      </div>
    </div>
    <div class="pay-error" v-else-if="orderState == 'fail'">
      <div class="pay-img">
        <img src="@/assets/images/i_pay_error.png">
      </div>
      <div class="pay-txt">对不起，您购买失败！</div>
      <div class="btn-wrap btn-next-group">
        <a href="javascript:;" class="btn-buy btn-next" @click="buyAgain()">重新购买</a>
      </div>
    </div>
    <div class="pay-error" v-else-if="orderState == 'timeout'">
      <div class="pay-img">
        <img src="@/assets/images/i_pay_error.png">
      </div>
      <div class="pay-txt">订单超时请重新购买</div>
      <div class="btn-wrap btn-next-group">
        <a href="javascript:;" class="btn-buy btn-next" @click="buyAgain()">重新购买</a>
      </div>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import loadingMore from '@/components/loadingMore'
import { Countdown } from 'vux'
export default {
  components: {
    Countdown,
    loadingMore
  },
  data () {
    return {
      state: 0,
      time: 3,
      // account: null,
      // pwd: null,
      // userType: null,
      outTradeNo: null,
      loading: false,
      orderQuery: null,
      orderId: null,
      orderState: null
    }
  },
  created () {
    this.outTradeNo = this.$route.query && this.$route.query.out_trade_no
    this.orderId = this.$route.query && this.$route.query.oid
    this.orderType = this.$route.query && this.$route.query.type
    // if (orderType === 'ok') {
    this.getOrderQuery()
    // }
    // this.userType = Utils.session('userType')
  },
  methods: {
    getOrderQuery () {
      let that = this
      clearInterval(that.orderQuery)
      that.orderQuery = setInterval(() => {
        if (that.outTradeNo) {
          that.getOrderByTradeNo(that.outTradeNo)
        } else {
          that.getOrderByOrderId(that.orderId)
        }
      }, 2000)
    },
    // 获取支付结果 by trandno
    getOrderByTradeNo (tradeNo) {
      let that = this
      that.loading = true
      Api.orderByTrandeNo({outTradeNo: tradeNo}).then(res => {
        if (res.code === 20000 && res.status === 'succ' && res.data.payStatus === '102') {
          clearInterval(that.orderQuery)
          that.loading = false
          that.orderState = 'ok'
        } else if (res.code === 20000 && res.status === 'succ' && res.data.payStatus === '103') {
          clearInterval(that.orderQuery)
          that.loading = false
          that.orderState = 'timeout'
        }
      })
    },
    // 获取支付结果 by order
    getOrderByOrderId (orderId) {
      let that = this
      that.loading = true
      Api.orderByOrderId({orderId: orderId}).then(res => {
        if (res.code === 20000 && res.status === 'succ' && res.data.payStatus === '102') {
          clearInterval(that.orderQuery)
          that.loading = false
          that.orderState = 'ok'
        } else if (res.code === 20000 && res.status === 'succ' && res.data.payStatus === '103') {
          clearInterval(that.orderQuery)
          that.loading = false
          that.orderState = 'timeout'
        }
      })
    },
    finish () {
      Api.getUserInfo().then(res => {
        Utils.local('userData', res.data)
        this.$router.push({name: 'home'})
      })
    },
    buyAgain () {
      this.$router.push({name: 'goodsPay'})
    },
    goHome () {
      Api.getUserInfo().then(res => {
        Utils.local('userData', res.data)
        this.$router.push({name: 'home'})
      })
    }
  }
  // destroyed () {
  //   Utils.session('userType', 10)
  // }
}
</script>


<style lang="scss" scoped>
.pay-state-page{
  padding: .266667rem /* 10/37.5 */ .533333rem /* 20/37.5 */;
  .pay-img{
    width: 1.946667rem /* 73/37.5 */;
    height: 1.946667rem /* 73/37.5 */;
    margin: .533333rem /* 20/37.5 */ auto 1.066667rem /* 40/37.5 */;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .pay-txt{
    font-size: 16px;
    color: #333;
    margin-bottom: .666667rem /* 25/37.5 */;
    text-align: center;
  }
  .pay-account{
    font-size: 16px;
    color: #0aa7f5;
    width: 4.266667rem /* 160/37.5 */;
    margin: 0 auto .666667rem /* 25/37.5 */;
  }
  .pay-gohome{
    margin-top: 1.066667rem /* 40/37.5 */;
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .btn-wrap{
    text-align: center;
  }
}
</style>

